<script setup>
 import {ref,reactive} from 'vue'
 /* 导入 可以发送请求的request对象  axios副本 */
 import request from '../utils/request'

 // 导入一个编程式路由
 import {useRouter} from 'vue-router'
 let router = useRouter();

// 定义响应式数据
let registUser = reactive({
    username:"",
    userPwd:""
})
let usernameMsg= ref("")
let userPwdMsg =ref("")
let reUserPwd= ref("")
let reUserPwdMsg= ref("")
// 定义数据格式校验的方法
let checkUsername = async ()=>{
    // 校验数据格式,返回true和false
    let usernameReg=/^[a-zA-Z0-9]{5,10}$/
    if(!(usernameReg.test(registUser.username))){
        usernameMsg.value="格式有误"
        return false
    }
    // 格式通过之后, 校验用户名是否被占用
    /* 
    * uri     : /user/checkUserName
    * method  : GET/POST
    * params  : username=zhangsan
    * response: 用户名可用     {"code":200,"message":"success",data:null} 
    *           用户名不可用   {"code":505,"message":"userNameUsed",data:null}
    */
   let {data} = await request.get(`/user/checkUserName?username=${registUser.username}`) // {data:""}
   
    if(data.code == "200"){
        usernameMsg.value="OK"
        return true
    }
    usernameMsg.value="被占用"
    return false
}

let checkUserPwd = ()=>{
    // 校验密码格式 
    let passwordReg=/^[0-9]{6}$/
    if(passwordReg.test(registUser.userPwd)){
        userPwdMsg.value="OK"
        return true
    }
    userPwdMsg.value="NO"
    return false
}

let checkReUserPwd= ()=>{
    let passwordReg=/^[0-9]{6}$/
    if(passwordReg.test(reUserPwd.value)){
        if(reUserPwd.value == registUser.userPwd){
            reUserPwdMsg.value="OK"
            return true
        }
    }
    reUserPwdMsg.value="NO"
    return false
}

// 注册用户的方法
async function regist(){
    // 校验三个输入框
    let f1 =await checkUsername();
    let f2 =checkUserPwd();
    let f3 =checkReUserPwd();
    if(f1 && f2 && f3){
        // 发送请求,提交数据
        /*
        * 完成用户注册的接口 
        * uri      "/user/regist"
        * method   post
        * json     {username:"zhangsan",userPwd:"123456"}
        * response 注册成功     {"code":200,"message":"success",data:null} 
                   注册失败     {"code":505,"message":"userNameUsed",data:null}
                                
        
        
        */
        let {data} = await request.post("/user/regist",registUser) // {data}
        // 根据响应结果判断下一步操作
        // 1 注册成功  弹窗提示  跳转到登录
        if(data.code == "200"){
            alert("注册成功,快去登录吧")
            // 使用路由跳转页面
            router.push("/login")
        }else{
            // 2 注册失败  弹窗提示  停留在本页
            alert("注册失败,快去登录吧")
        }
    }
}

</script>
<template>
  <div>
    <h3 class="ht">请注册</h3>
    <table class="tab" cellspacing="0px">
        <tr class="ltr">
            <td>请输入账号</td>
            <td>
                <input class="ipt" 
                  id="usernameInput" 
                  type="text" 
                  name="username" 
                  v-model="registUser.username"
                  @blur="checkUsername()">

                <span id="usernameMsg" class="msg" v-text="usernameMsg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td>请输入密码</td>
            <td>
                <input class="ipt" 
                id="userPwdInput" 
                type="password" 
                name="userPwd" 
                v-model="registUser.userPwd"
                @blur="checkUserPwd()">
                <span id="userPwdMsg" class="msg" v-text="userPwdMsg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td>确认密码</td>
            <td>
                <input class="ipt" 
                id="reUserPwdInput" 
                type="password" 
                v-model="reUserPwd"
                @blur="checkReUserPwd()">
                <span id="reUserPwdMsg" class="msg" v-text="reUserPwdMsg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td colspan="2" class="buttonContainer">
                <input class="btn1" type="button" value="注册" @click="regist()">
                <input class="btn1" type="button" value="重置">
                <router-link to="/login">
                  <button class="btn1">去登录</button>
                </router-link>
            </td>
        </tr>
    </table>
  </div>
</template>
<style scoped>
       .ht{
            text-align: center;
            color: cadetblue;
            font-family: 幼圆;
        }
        .tab{
            width: 500px;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
        }
        .ltr td{
            border: 1px solid  powderblue;

        }
        .ipt{
            border: 0px;
            width: 50%;

        }
        .btn1{
            border: 2px solid powderblue;
            border-radius: 4px;
            width:60px;
            background-color: antiquewhite;
        }
        .msg {
            color: gold;
        }
        .buttonContainer{
            text-align: center;
        }
</style>